import 'package:flutter/material.dart';

class FormTestRoute extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _FormTestRouteState();
  }
}

class _FormTestRouteState extends State<FormTestRoute> {
  final TextEditingController _unameController = TextEditingController();
  final TextEditingController _pwdController = TextEditingController();
  GlobalKey _formKey = GlobalKey<FormState>();

  final FocusNode _focusNode1 = FocusNode();
  final FocusNode _focusNode2 = FocusNode();
  FocusScopeNode? _focusScopeNode;

  @override
  void initState() {
    _unameController.text = 'hello world!';
    _unameController.selection = TextSelection(
      baseOffset: 2,
      extentOffset: _unameController.text.length,
    );
    _unameController.addListener(() {
      print(_unameController.text);
    });

    _focusNode1.addListener(() {
      print('username focus: ${_focusNode1.hasFocus}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Form Test'),
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
          child: Form(
            key: _formKey,
            autovalidate: true,
            child: Column(
              children: <Widget>[
                TextFormField(
                  focusNode: _focusNode1,
                  autofocus: true,
                  controller: _unameController,
                  decoration: InputDecoration(
                    labelText: '用户名',
                    hintText: '用户名或邮箱',
                    prefixIcon: Icon(Icons.person),
                    enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
                    focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.blue)),
                  ),
                  onChanged: (value) {
                    print('onChange: $value');
                  },
                  validator: (value) {
                    return value!.trim().length > 0 ? null : '用户名不能为空';
                  },
                ),
                TextFormField(
                  focusNode: _focusNode2,
                  controller: _pwdController,
                  obscureText: true,
                  decoration: InputDecoration(
                    labelText: '密码',
                    hintText: '您的登录密码',
                    prefixIcon: Icon(Icons.lock),
                    hintStyle: TextStyle(color: Colors.grey, fontSize: 13),
                  ),
                  validator: (value) {
                    return value!.trim().length > 5 ? null : '密码不能少于6位';
                  },
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 28),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        //   child: RaisedButton(
                        // padding: EdgeInsets.all(15),
                        // child: Text('登录'),
                        // color: Theme.of(context).primaryColor,
                        // textColor: Colors.white,
                        // onPressed: () {
                        //   if ((_formKey.currentState as FormState).validate()) {
                        //     print('提交数据: ${_unameController.text} ${_pwdController.text}');
                        //   }
                        // },
                        // )
                        child: Builder(
                          builder: (context) {
                            return RaisedButton(
                              child: Text('登录'),
                              color: Theme.of(context).primaryColor,
                              textColor: Colors.white,
                              onPressed: () {
                                if (Form.of(context)!.validate()) {
                                  print('提交数据: ${_unameController.text} ${_pwdController.text}');
                                }
                              },
                            );
                          },
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  child: TextField(
                    keyboardType: TextInputType.emailAddress,
                    decoration: InputDecoration(
                      labelText: 'Email',
                      hintText: '电子邮件地址',
                      prefixIcon: Icon(Icons.email),
                      border: InputBorder.none,
                    ),
                  ),
                  decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey[200]!, width: 1))),
                ),
                Builder(
                  builder: (context) => Column(
                    children: <Widget>[
                      RaisedButton(
                        child: Text('移动焦点'),
                        onPressed: () {
                          if (_focusScopeNode == null) {
                            _focusScopeNode = FocusScope.of(context);
                          }
                          _focusScopeNode?.requestFocus(_focusNode2);
                        },
                      ),
                      RaisedButton(
                        child: Text('隐藏焦点'),
                        onPressed: () {
                          _focusNode1.unfocus();
                          _focusNode2.unfocus();
                        },
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ));
  }
}
